<template lang="pug">
  .clearfix
    Modal(
      width="80%"
      v-model="isShowAuditDetailModal"
      title="流程审批单"
      class-name="vertical-center-modal"
    )
      .clearfix
        .pull-left.text-error.font-weight.pl-20.font-16.line-h-32 审批结果：{{workFlowStatus}} 
        .pull-right
          Button(type="primary" @click="getPDF") 导出PDF
      .search-form
        p.text-error.font-weight.pt-20.pb-10.pl-20.font-16 申请详情
        Form.ivu-row(ref="formData" :model="formData" :rules="rules" :label-width="100")
          FormItem.form-item.ivu-col.pr-20(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled")
            template(v-if="item.type === 'select'")
              Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.bankName"
                  :key="index"
                ) {{ c_item.bankName }}
            template(v-if="item.type === 'textarea'")
              Input.mt-30(v-model="formData[item.model]" :placeholder="item.placeholder" type="textarea" :rows="3" :disabled="item.isDisabled")
            template(v-if="item.type === 'datePicker'")
              DatePicker.w-100(v-model="formData[item.model]" placeholder="请选择" type="date" format="yyyy-MM-dd" :disabled="item.isDisabled" @on-change="handleChangeDatePicker(item.model, $event)")

      .pl-20.pr-20.bg-white.mb-30
        p.text-error.font-weight.pt-20.pb-10.font-16 审批详情
        Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable")
          template(slot-scope="{ row, index }" slot="action")
            Button.mr-10( type="text"  v-if='hasReject' :disabled="row.status!=4"  @click="handleShowSendBackModal(row,-1)") 驳回

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 关闭
        //- Button(type="primary" @click="handleSubmit" :loading="!isCanSubmit") 确定

</template>

<script>
import _cloneDeep from 'clone-deep'
import { AuditDetailThead } from './tableHead'
import { WorkFlowApi } from './WorkFlow.api.js';

export default {
  name: '',

  props: {
  },

  computed: {
  },

  components: {
  },

  data () {
    return {
      isShowAuditDetailModal: false,
      record: null,
      thead: _cloneDeep(AuditDetailThead),
      tableData: [],
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10, // 当前页面展示条数
        total: 0, // 应付总计
      },
      // selectedArr: [],
      // selectedIdArr: [],
      formData: {
        createrName: '',
        createTime: '',
        doneTime: '',
        workFlowNo: '',
        workFlowName: '',
        workFlowTheme: '',
        yearMonth: '',
        requestAmt: '',
        paidAmt: '',
        remark: '',
      },
      formItem: [
        { type: 'input', label: '申请人', placeholder: '请输入申请人', prop: 'createrName', model: 'createrName', style: 'ivu-col-span-8', isDisabled: true },
        { type: 'datePicker', label: '申请时间', placeholder: '请选择申请时间', prop: 'createTime', model: 'createTime', style: 'ivu-col-span-8', isDisabled: true },
        { type: 'datePicker', label: '完成时间', placeholder: '请选择完成时间', prop: 'doneTime', model: 'doneTime', style: 'ivu-col-span-8', isDisabled: true },
        { type: 'input', label: '流程编号', placeholder: '请输入流程编号', prop: 'workFlowNo', model: 'workFlowNo', style: 'ivu-col-span-8', isDisabled: true },
        { type: 'input', label: '流程名称', placeholder: '请输入流程名称', prop: 'workFlowName', model: 'workFlowName', style: 'ivu-col-span-8', isDisabled: true },
        { type: 'input', label: '流程主题', placeholder: '请输入流程主题', prop: 'workFlowTheme', model: 'workFlowTheme', style: 'ivu-col-span-8', isDisabled: true },
        { type: 'input', label: '费用月份', placeholder: '请选择费用月份', prop: 'yearMonth', model: 'yearMonth', style: 'ivu-col-span-8', isDisabled: true },
        { type: 'input', label: '请款金额', placeholder: '请输入请款金额', prop: 'requestAmt', model: 'requestAmt', style: 'ivu-col-span-8', isDisabled: true },
        { type: 'input', label: '垫付金额', placeholder: '请输入垫付金额', prop: 'paidAmt', model: 'paidAmt', style: 'ivu-col-span-8', isDisabled: true },
        { type: 'textarea', label: '说明', placeholder: '请输入说明', prop: 'remark', model: 'remark', style: 'ivu-col-span-8', isDisabled: true },
      ],
      rules: {
        // amount: [
        //   { required: true, message: '请输入付款金额', trigger: 'blur' },
        // ]
      },
      arrListDown: {
        bankList: []
      },
      isCanSubmit: true,
      modalType: null,
      workFlowStatus: ''
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowAuditDetailModal = false
    },

    show (row) {
      this.record = row
      this.isShowAuditDetailModal = true
      console.log('显示弹窗 row: ', row)
      this.getDetail(row.primaryKeyID)
    },

    // 获取审批详情
    getDetail(primaryKeyID) {
      WorkFlowApi.Detail({primaryKeyID: primaryKeyID}).then(resp => {
        console.log('获取审批详情resp: ', resp)
        if (resp.status == 200 && resp.data.success) {
          // this.$Message.success(resp.data.message)
          this.workFlowStatus = resp.data.data.workFlowStatus
          this.formData = resp.data.data
          this.tableData = resp.data.data.details
        } else {
          this.$Message.error(resp.data.message)
        } 
      })
    },

    // 查看审批详情-导出PDF
    getPDF() {
      WorkFlowApi.GetPDF({primaryKeyID: this.record.primaryKeyID}).then(resp => {
        console.log('导出PDFresp: ', resp)
        if (resp.status == 200 && resp.data.success) {
          console.log('返回链接: ', resp.data.message)
          window.open(resp.data.message, '_blank')
        } else {
          this.$Message.error(resp.data.message)
        } 
      })
    },

    // handleSubmit () {
    //   this.$refs.formData.validate((valid) => {
    //     if (valid) {
    //       console.log('提交 formData：', this.formData, ', tableData: ', this.tableData)
    //     }
    //   })
    // },
  }
}
</script>

<style lang="less" scope>
</style>
